<template>
  <f7-page ptr @ptr:refresh="init" @page:afterin="backInit">
    <f7-navbar class="order-nav no-hairline" title="我的订单" back-link="返回"></f7-navbar>
    <div class="tab-box">
      <div class="tab-inner">
        <custom-tabs v-model="tabIndex" style="height: 100%;">
          <tab-item :value="1">
            <div class="tab-item">
              <img src="../assets/dd_001_01.png" alt="">
              排单
            </div>
          </tab-item>
          <tab-item :value="2">
            <div class="tab-item">
              <img src="../assets/dd_002_01.png" alt="">
              出单
            </div>
          </tab-item>
        </custom-tabs>
      </div>
    </div>

    <div class="item-list-box" v-show="tabIndex === 1">
      <van-grid clickable :column-num="2" :gutter="30" square :border="false">
        <van-grid-item @click="gridClick(2)">
          <img src="../assets/dd_010.png" alt="">
          <p class="main-font-color">匹配中</p>
          <f7-badge color="red">{{ordersInfo.buy_guamai}}</f7-badge>
        </van-grid-item>
        <van-grid-item @click="gridClick(1, 0)">
          <img src="../assets/dd_010.png" alt="">
          <p class="main-font-color">待付款</p>
          <f7-badge color="red">{{ordersInfo.buy_fukuan}}</f7-badge>
        </van-grid-item>
        <van-grid-item @click="gridClick(1, 1)">
          <img src="../assets/dd_010.png" alt="">
          <p class="main-font-color">待确认</p>
          <f7-badge color="red">{{ordersInfo.buy_check}}</f7-badge>
        </van-grid-item>
        <van-grid-item @click="gridClick(1, 2)">
          <img src="../assets/dd_010.png" alt="">
          <p class="main-font-color">已完成</p>
          <f7-badge color="red">{{ordersInfo.buy_complete}}</f7-badge>
        </van-grid-item>
        <van-grid-item @click="gridClick(3, -3)">
          <img src="../assets/dd_010.png" alt="">
          <p class="main-font-color">投诉</p>
          <f7-badge color="red">{{ordersInfo.buy_plaint}}</f7-badge>
        </van-grid-item>
        <van-grid-item @click="gridClick(4, -4)">
          <img src="../assets/dd_010.png" alt="">
          <p class="main-font-color">被投诉</p>
          <f7-badge color="red">{{ordersInfo.buy_t}}</f7-badge>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="item-list-box" v-show="tabIndex === 2">
      <van-grid clickable :column-num="2" :gutter="30" square :border="false">
        <van-grid-item @click="gridClick(5)">
          <img src="../assets/dd_010.png" alt="">
          <p class="main-font-color">匹配中</p>
          <f7-badge color="red">{{ordersInfo.sell_guamai}}</f7-badge>
        </van-grid-item>
        <van-grid-item @click="gridClick(6, 1)">
          <img src="../assets/dd_010.png" alt="">
          <p class="main-font-color">待收款</p>
          <f7-badge color="red">{{ordersInfo.sell_rece}}</f7-badge>
        </van-grid-item>
        <van-grid-item @click="gridClick(6, 2)">
          <img src="../assets/dd_010.png" alt="">
          <p class="main-font-color">已完成</p>
          <f7-badge color="red">{{ordersInfo.sell_complete}}</f7-badge>
        </van-grid-item>
        <van-grid-item @click="gridClick(6, 0)">
          <img src="../assets/dd_010.png" alt="">
          <p class="main-font-color">待投诉</p>
          <f7-badge color="red">{{ordersInfo.sell_fukuan}}</f7-badge>
        </van-grid-item>
        <van-grid-item @click="gridClick(7)">
          <img src="../assets/dd_010.png" alt="">
          <p class="main-font-color">投诉</p>
          <f7-badge color="red">{{ordersInfo.sell_plaint}}</f7-badge>
        </van-grid-item>
        <van-grid-item @click="gridClick(8)">
          <img src="../assets/dd_010.png" alt="">
          <p class="main-font-color">被投诉</p>
          <f7-badge color="red">{{ordersInfo.sell_t}}</f7-badge>
        </van-grid-item>
      </van-grid>
    </div>
  </f7-page>
</template>

<script>
  import { getOrderList } from "../api/home";

  export default {
    name: "my-order",
    data() {
      return {
        tabIndex: 1,
        ordersInfo: {}
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init(done) {
        getOrderList().then(res => {
          this.ordersInfo = res.data;
          done && done();
        })
      },
      gridClick(type, status) {
        /*
        * type2 匹配中
        * type1 待付款 待确认 已完成
        * */
        this.$f7router.navigate('/orders-list/', {context: {
          type,
          status,
          tabIndex: this.tabIndex
        }});
      },
      backInit(data) {
        if(this.$store.state.refreshMyOrderStatus) {
          this.init();
          this.$store.commit('refreshMyOrder', false)
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .order-nav /deep/ .navbar-bg {
    background:linear-gradient(57deg,#4AAECF,rgba(87,225,255,1))!important;
  }
  .tab-box {
    height: 200px;
    background: url("../assets/dd_006.png")no-repeat center top;
    background-size: 100% 100%;
    position: relative;
    margin-bottom: 100px;
    .tab-inner {
      height: 120px;
      position: absolute;
      width: calc(100% - 80px);
      bottom: -50px;
      left: 50%;
      transform: translateX(-50%);
      background:rgba(76,182,214,1);
      border-radius:20px;
      &:after {
        content: '';
        display: block;
        width: 1px;
        height: 54px;
        background: #0C182D;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateY(-50%);
      }
      .tab-item {
        display: flex;
        align-items: center;
        font-size: 26px;
        img {
          width: 50px;
          margin-right: 10px
        }
      }
    }
  }
  .item-list-box {
    /*width: 80%;*/
    /*margin: 0 auto;*/
    /deep/ .van-grid-item__content {
      background: url("../assets/dd_003.png") no-repeat center center;
      background-size: cover;
    }
    img {
      width: 88px;
      height: auto;
    }
    p {
      font-size: 28px;
      padding-bottom: 5px;
    }
  }
</style>